import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Space,
    Select, Upload, message,
} from 'antd'
import {Link, useSearchParams} from 'react-router-dom'
import './index.scss'
import {useEffect, useState} from 'react'
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'
import {addArticleApi, editArticleApi, getArticleByIdApi} from "@/api/article";
import {PlusOutlined} from "@ant-design/icons";
import useChannel from "@/hooks/useChannel";

const { Option } = Select

const Publish = () => {

    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    const {channelList} = useChannel()
    const [coverType, setCoverType] = useState(0)
    const [imageList, setImageList] = useState([])

    const [form] = Form.useForm()
    useEffect(() => {
        if(articleId) {
            getArticleByIdApi(articleId).then(res => {
                if(res.message === 'OK') {
                    const data = res.data
                    const { cover } = data
                    form.setFieldsValue({
                        ...data,
                        type: cover.type
                    })

                    setCoverType(cover.type)
                    setImageList(cover.images.map(url => {
                        return {url}
                    }))
                }
            })
        }
    }, [articleId, form])
    // 提交表单
    const onFinish = (formValue) => {
        if(imageList.length !== coverType) {
            return message.warning('图片类型和图片数量不匹配！')
        }
        let params = {
            title: formValue.title,
            channel_id: formValue.channel_id,
            cover: {
                type: coverType,
                images: imageList.map(item => {
                    if(item.response){
                        return item.response.data.url
                    } else {
                        return item.url
                    }
                })
            },
            content: formValue.content
        }
        if(articleId) {
            params.id = articleId
            editArticleApi(params).then(res => {
                if(res.message === 'OK'){
                    message.success('文章编辑成功')
                }
            })
        } else {
            addArticleApi(params).then(res => {
                if(res.message === 'OK'){
                    message.success('文章创建成功')
                }
            })
        }
    }

    const onTypeChange = (e) => {
        setCoverType(e.target.value)
    }

    const uploadChange = (e) => {
        setImageList(e.fileList)
    }

    return (
        <div className="publish">
            <Card title={<Breadcrumb items={[{ title: <Link to={'/'}>首页</Link> }, { title: `${articleId ? '编辑' : '发布'}文章` }]}/>}>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 0 }}
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入文章标题' }]}>
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item label="频道" name="channel_id" rules={[{ required: true, message: '请选择文章频道' }]}>
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {
                                channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {
                            coverType > 0 && <Upload
                                name='image'
                                listType='picture-card'
                                showUploadList
                                action={'http://geek.itheima.net/v1_0/upload'}
                                onChange={uploadChange}
                                maxCount={coverType}
                                fileList={imageList}>
                                <div style={{marginTop: 8}}><PlusOutlined /></div>
                            </Upload>
                        }
                    </Form.Item>
                    <Form.Item label="内容" name="content" rules={[{ required: true, message: '请输入文章内容' }]}>
                        <ReactQuill className='publish-quill' theme='snow' placeholder='请输入文章内容' />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish